@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        .Va-container-content {
            height: 72vw;
        }

        .icons-type-list {
            width: 350px;
            overflow: hidden;
            padding: 0;
        }

        .icons-type-one {
            border-radius: unset !important;
            border: 1px solid #ccc;
            padding: 10px 10px;
            margin: 2px;
        }

        .icons-type-list .icons-type-one.is-checked {
            border: 1px solid var(--buttonHoverColors);
        }
    </style>
@endpush
@section("content")
    <div class="form-container">
        <div class="form-container-header">
            <el-form :inline="true" :model="tables.search" size="small">
                <el-form-item>
                    <el-input v-model="tables.search.keyword" placeholder="按名称关键词搜索" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="tables.search.status" placeholder="-- 按状态搜索 --" clearable>
                        <el-option label="状态(全部)" value=""></el-option>
                        <el-option key="1" label="启用" value="1"></el-option>
                        <el-option key="2" label="禁用" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" @click="tablesSearchEvent"><i class="fa fa-search"></i> 搜 索
                    </el-button>
                    <el-button size="small" @click="tablesResetsEvent"><i class="fa fa-refresh"></i> 重 置</el-button>
                </el-form-item>

                <el-row class="options-right">
                    <el-button size="small" type="primary" v-if="permissions.insert" @click="tablesRowsInsert">
                        <i :class="permissions.insert.icon"></i> @{{permissions.insert.name}}
                    </el-button>
                </el-row>

            </el-form>
        </div>
        <div class="form-container-main inline-tables no-pic" v-loading="tables.options.loading">
            <el-table
                    :data="tables.data"
                    border
                    :stripe="true"
                    @selection-change="tablesSelectChange"
                    @sort-change="tablesPaginationSortChange"
                    @cell-click="tablesCellMoveEvent"
                    tooltip-effect="dark"
                    ref="formContainerTables"
                    row-key="id">
                <el-table-column prop="name" label="名称" align="left" min-width="160"></el-table-column>

                <el-table-column prop="url" label="#栏目链接(路由)" align="center" min-width="100">
                    <template slot-scope="scope">
                        <span class="table-span">
                            <el-tooltip class="item" effect="dark" content="点击复制" placement="right-end">
                                <el-link v-if="scope.row.pinyin == 1" @click="copy('/' + scope.row.link + '/' + scope.row.id)" type="primary" :underline="false">
                                    @{{ '/' + scope.row.link + '/' + scope.row.id }} <i class="el-icon-copy-document"></i>
                                </el-link>

                                <el-link v-else @click="copy('/'+scope.row.link)" type="primary" :underline="false">
                                    @{{ '/'+scope.row.link }} <i class="el-icon-copy-document"></i>
                                </el-link>
                            </el-tooltip>
                        </span>
                    </template>
                </el-table-column>

                <el-table-column prop="module_page" label="#模板页面(前端路由)" align="center" min-width="150"></el-table-column>

                <el-table-column prop="type" label="栏目类型" align="center" min-width="100">
                    <template slot-scope="scope">
                        <span v-for="item in typeItems" v-if="scope.row.type == item.id" :class="'table-span ' + item.style">@{{item.name}}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="sort" label="排序" align="center" width="180" sortable>
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.sort" size="mini"
                                         @change="tablesRowsSort(scope.row)"></el-input-number>
                    </template>
                </el-table-column>

                <el-table-column prop="status" label="状态" align="center" width="160">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 2" size="mini" type="danger" effect="plain">禁用</el-tag>
                        <el-tag v-if="scope.row.status == 1" size="mini" type="success" effect="plain">启用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="updated_at" label="更新时间" align="center" :formatter="formatTableDate" width="180"
                                 sortable></el-table-column>
                <el-table-column prop="created_at" label="创建时间" align="center" :formatter="formatTableDate" width="180"
                                 sortable></el-table-column>

                <el-table-column prop="options" label="操作" align="left" width="220" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-if="permissions.insert" @click="tablesRowsAppend(scope.row)">
                            <i :class="permissions.insert.icon"></i> @{{permissions.insert.name}}
                        </el-button>
                        <el-button size="mini" warning type="text" @click="tablesRowsUpdate(scope.row)"
                                   v-if="permissions.update">
                            <i :class="permissions.update.icon"></i> @{{permissions.update.name}}
                        </el-button>
                        {{-- 更多操作 --}}
                        <el-dropdown size="small" style="margin-left: 10px">
                            <el-button size="mini" primary type="text"><i class="fa fa-reorder "></i> 更多操作<i
                                        class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-if="permissions.insert">
                                    <el-button size="mini" warning type="text" v-if="permissions.insert" @click="tablesRowsCopy(scope.row)">
                                        <i class="el-icon-copy-document"></i> 复制
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.status">
                                    <el-button size="mini" warning type="text"
                                               @click="tablesRowsStatus(scope.row,{id:scope.row.id})"
                                               v-if="permissions.status" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.status.icon"></i>
                                        @{{tables.status.maps[scope.row.status]}}
                                    </el-button>
                                </el-dropdown-item>

                                <el-dropdown-item v-if="permissions.remove">
                                    <el-button size="mini" danger type="text" @click="tablesRowsRemove(scope.row)"
                                               v-if="permissions.remove" :disabled="scope.row.is_system==1">
                                        <i :class="permissions.remove.icon"></i> @{{permissions.remove.name}}
                                    </el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        {{-- 更多操作 End. --}}
                    </template>
                </el-table-column>
            </el-table>
            {!! \App\Master\Framework\View\AdminUi::pagination() !!}
        </div>
    </div>
@endsection
{{--  扩展页面  --}}
@section("page")

    @include('admin.arts.manage.web_menus.forms')

@endsection
@push('scripts')
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config, $Layouts, $Tables, $DialogForms],
            data: {
                component: {status: false},
                config: {permissions: true, properties: '1'},
                tables: {
                    remove: {url: 'arts/manage/web_menus/remove', msg: '确认删除当前数据吗？', field: 'id'},
                    status: {url: 'arts/manage/web_menus/status', field: 'status'},
                    sort: {url: 'arts/manage/web_menus/rank', item: 'sort', field: 'id'},
                    url: 'arts/manage/web_menus', search: {}, pagination: {layout: ''},
                    prop: 'sort', orderBy: 'desc'
                },
                create: {
                    dialog: false, loading: false, action: '#',
                    model: {
                        parent_id: 0, name: '', link: '', sort: 255, type: '1', show_child: true, module_page: '', banner: '', pinyin: 0,
                        banner_link: '', banner_title: '', banner_desc: '', seo_title: '', seo_description: '', seo_keywords: '', content: ''
                    },
                    rules: {
                        type: [
                            {required: true, message: '请选择栏目类型', trigger: 'blur'}
                        ],
                        name: [
                            {required: true, message: '请填写菜单名称', trigger: 'blur'}
                        ],
                        link: [
                            {required: true, message: '请填写栏目连接', trigger: 'blur'}
                        ],
                        module_page: [
                            {required: true, message: '请填写模板页面', trigger: 'blur'}
                        ]
                    }
                },
                typeItems: [
                    {id: 1,name: '文章',style: 'primary',link: 'article',is_link:true},
                    {id: 2,name: '单页',style: 'success',link: 'page',is_link:false},
                ],
                parentsMenuItems: []
            },
            methods: {
                tablesRowsAppend(rows) {
                    var that = this;
                    that.config.properties = '1';
                    that.create.action = 'arts/manage/web_menus/insert';
                    that.create.model = {
                        parent_id: rows.id, name: '', link: '', sort: 255, type: '', show_child: true, module_page: '', banner: '', pinyin: 0,
                        banner_link: '', banner_title: '', banner_desc: '', seo_title: '', seo_description: '', seo_keywords: '', content: ''
                    };
                    that.getParentsMenuItems();
                    that.dialogFormsOpens('create');
                },

                tablesRowsCopy(rows) {
                    var that = this;
                    that.config.properties = '1';
                    that.create.action = 'arts/manage/web_menus/insert';
                    that.create.model = {
                        parent_id: rows.parent_id,
                        name: rows.name,
                        link: rows.link,
                        sort: rows.sort,
                        type: rows.type,
                        show_child: rows.show_child == 1 ? true : false,
                        module_page: rows.module_page,
                        pinyin: rows.pinyin + '',
                        banner: rows.banner,
                        banner_link: rows.banner_link,
                        banner_title: rows.banner_title,
                        banner_desc: rows.banner_desc,
                        seo_title: rows.seo_title,
                        seo_description: rows.seo_description,
                        seo_keywords: rows.seo_keywords,
                        content: rows.content
                    };
                    that.getParentsMenuItems();
                    that.dialogFormsOpens('create');
                },

                tablesRowsInsert() {
                    var that = this;
                    that.config.properties = '1';
                    that.create.action = 'arts/manage/web_menus/insert';
                    that.create.model = {
                        parent_id: 0, name: '', link: '', sort: 255, type: '', show_child: true, module_page: '', banner: '', pinyin: 0,
                        banner_link: '', banner_title: '', banner_desc: '', seo_title: '', seo_description: '', seo_keywords: '', content: ''
                    };
                    that.getParentsMenuItems();
                    that.dialogFormsOpens('create');
                },

                tablesRowsUpdate(rows) {
                    var that = this;
                    that.config.properties = '1';
                    that.create.action = 'arts/manage/web_menus/update';
                    that.create.model = {
                        id: rows.id,
                        parent_id: rows.parent_id,
                        name: rows.name,
                        link: rows.link,
                        sort: rows.sort,
                        type: rows.type,
                        show_child: rows.show_child == 1 ? true : false,
                        module_page: rows.module_page,
                        pinyin: rows.pinyin + '',
                        banner: rows.banner,
                        banner_link: rows.banner_link,
                        banner_title: rows.banner_title,
                        banner_desc: rows.banner_desc,
                        seo_title: rows.seo_title,
                        seo_description: rows.seo_description,
                        seo_keywords: rows.seo_keywords,
                        content: rows.content
                    };
                    that.getParentsMenuItems();
                    that.dialogFormsOpens('create');
                },

                tablesResetsEvent() {
                    var that = this;
                    that.tables.search = {keyword: '', status: ''};
                    that.tablesGetTableList();
                },
                //转换栏目拼音
                pinyin:function (){
                    var that = this;
                    if(!that.create.model.name){
                        that.$Message('请填先写栏目名称', 'warning');
                        that.create.model.pinyin = 2;
                        return;
                    }
                    if(that.create.model.pinyin == 1){
                        for(var i = 0;i < that.typeItems.length; i ++){
                            if(that.typeItems[i].is_link === true && that.create.model.type === that.typeItems[i].id){
                                that.create.model.link = that.typeItems[i].link;
                                return;
                            }
                        }

                        var { pinyin } = pinyinPro;
                        //转换
                        var py = pinyin(that.create.model.name, {toneType: 'none'});
                        that.create.model.link = py.replaceAll(' ','');
                    }
                },
                getParentsMenuItems() {
                    var that = this;
                    $Request.postJson('arts/manage/web_menus', {}, function (res) {
                        that.parentsMenuItems = res.result;
                    });
                },
            },
            created() {
                this.getParentsMenuItems();
            },
            mounted() {

            }
        })
    </script>
@endpush